﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title></title>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="http://47.93.78.8:8091/signalr/hubs"></script>
    <style>
        #sc strong {
            margin-left: 20px;
        }

        .bor {
            border: 1px solid;
            float: left;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <div>
                名称：
                <p id="userName"></p>
            </div>
            房间名：
            <p id="roomName"></p>
            <div>
                <div style="float: left">
                    A队：<b id="TeamAName"></b><br> A队教练：
                    <b id="CoachNameA"></b><br> A队成绩：
                    <b id="TeamAScore"></b><br> 1：成绩：
                    <b id="Section1A"></b><br> 2：成绩：
                    <b id="Section2A"></b><br> 3：成绩：
                    <b id="Section3A"></b><br> 4：成绩：
                    <b id="Section4A"></b><br> 5：成绩：
                    <b id="Section5A"></b><br>
                </div>
                <div style="float: right">
                    B队：<b id="TeamBName"></b><br> B队教练：
                    <b id="CoachNameB"></b><br> B队成绩：
                    <b id="TeamBScore"></b><br> 1：成绩：
                    <b id="Section1B"></b><br> 2：成绩：
                    <b id="Section2B"></b><br> 3：成绩：
                    <b id="Section3B"></b><br> 4：成绩：
                    <b id="Section4B"></b><br> 5：成绩：
                    <b id="Section5B"></b><br>
                </div>
                <div style="clear: both"></div>
            </div>
            <div style="border: double" class="room" id="Room" roomname="roomName">
                <button class="removeRoom">退出房间</button> 房间聊天记录如下:
                <ul></ul>
            </div>
            <div style="font-size: 20px" id="sc"></div>
            <div id="players">
            </div>
    </form>
</body>

</html>
<script>
    //url参数值
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    var As = 0;
    var Bs = 0;
    var va = "http://47.93.78.8:8091";
    $(function () {
        //var conn = $.hubConnection();
        //var conn = $.hubConnection("http://localhost:19042/signalr");
        //conn.qs = { "clientName": getUrlParam("name") };
        var conn = $.hubConnection(va + "/signalr");
        var name = getUrlParam("name");
        if (!name)
            name = prompt('请输入您的名称（如：爱啥啥）:', '')
        var roomName = getUrlParam("roomName");
        if (!roomName)
            roomName = prompt('请输入房间的名称（如：197、198）:', '')
        conn.qs = { "clientName": name };
        conn.start().done(function () {
            // var data = getUrlParam("roomName");
            chat.invoke("addRoom", roomName);
        });

        var chat = conn.createHubProxy("SCompetitionHub");
        //调用hub中注册的sendMessage 方法  
        chat.on("sendMessage", function (roomname, message) {
            var data = eval('(' + message + ')');
            $.each(data, function (index, obj) {
                $("#" + obj["Key"]).html(obj["Value"]);
            })
            $("#Room").find("ul").each(function () {
                $(this).append('<li>' + message + '<a href="#">' + data.time + '</a></li>');
            })
        });
        //调用hub中注册的getSLineUpData方法  
        chat.on("getSLineUpData", function (roomname, message) {
            var data = eval('(' + message + ')');
            $("#Room").find("ul").each(function () {
                $(this).append('<li>' + message + '<a href="#">1111111111111' + data.time + '</a></li>');
            })
        });
        //调用hub中注册的sendInitMessage方法  
        chat.on("sendInitMessage", function (roomname, message) {
            var data = eval('(' + message + ')');
            $.each(data["msg"]["SCompetition"][0], function (index, obj) {
                $("#" + index).html(obj);
            })
        });
        //调用hub中addRoom 加入房间的方法  
        chat.on("addRoom", function (roomName, data) {
            var html = '<div style="float:left; margin-left:30px; border:double" class="room" id="' + roomName + '" roomname="' + roomName + '" ><button class="removeRoom">退出房间</button> \  ' + roomName + '房间聊天记录如下:<ul><li>' + data + '</li></ul> <input class="textt" type="text"/> <button class="send">发送</button><div>'
            $("#rooms").append(html);
        });

        $("#roomName").html(getUrlParam("roomName"));
        $("#userName").html(getUrlParam("name"));
        //加入房间
    });

</script>